<%-- Created by IntelliJ IDEA. User: Administrator Date: 2023/1/25 Time: 15:30
To change this template use File | Settings | File Templates. --%>
<%@ page
        contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>客户联系人信息</title>
    <!-- 引入 js 和 样式 -->
    <jsp:include page="../common/css_js.jsp"/>
    <jsp:include page="../common/table.jsp"/>
    <style>
        #tab {
            font-size: 18px;
            margin: 0 auto;
            width: 1100px;
            height: 110px;
        }

        #tab tr td:first-child {
            width: 150px;
            text-align: right;
            font-weight: bolder;
        }

        #tab tr td:nth-child(3) {
            text-align: right;
            font-weight: bolder;
        }

        #tab input {
            width: 280px;
            background-color: white;
        }
    </style>
</head>
<body>
<div class="container col-lg-12">
    <div class="card">
        <header class="card-header">
            <div class="card-title">
                <h4><b>客戶信息</b></h4>
            </div>
        </header>
        <div class="card-body">
            <div class="row">
                <div class="col-md-4 column">
                    <!-- 客户信息 -->
                    <table id="tab">
                        <tr>
                            <td>客户名称：</td>
                            <td>
                                <label
                                ><input
                                        class="form-control"
                                        name="customer_name"
                                        value="${customer.customerName}"
                                        readonly="readonly"
                                /></label>
                            </td>
                            <td>客户经理：</td>
                            <td>
                                <label
                                ><input
                                        class="form-control"
                                        name="chance_source"
                                        value="${customer.customerManager}"
                                        readonly="readonly"
                                /></label>
                            </td>
                        </tr>
                        <tr>
                            <td>客户等级：</td>
                            <td>
                                <label
                                ><input
                                        class="form-control"
                                        name="linkage_man"
                                        value="${customer.customerLevel}"
                                        readonly="readonly"
                                /></label>
                            </td>
                            <td>客户地址：</td>
                            <td>
                                <label
                                ><input
                                        class="form-control"
                                        name="linkage_phone"
                                        value="${customer.customerAddress}"
                                        readonly="readonly"
                                /></label>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <header class="card-header">
            <div class="card-title">
                <h4><b>客戶联系人信息</b></h4>
            </div>
        </header>
        <div class="card-body">
            <!-- 条件查询表单 -->
            <form class="form-inline" name="form1" action="#" method="post">
                <b>姓名：</b
                ><label
            ><input
                    style="width: 150px"
                    name="linkageName"
                    class="form-control"
                    placeholder="请输入联系人姓名"
            /></label>
                &nbsp;
                <b>性别：</b>
                <div class="custom-control custom-radio custom-control-inline">
                    <input
                            type="radio"
                            id="customRadioInline3"
                            name="linkageSex"
                            value=""
                            class="custom-control-input"
                            checked="checked"
                    />
                    <label class="custom-control-label" for="customRadioInline3"
                    >全部</label
                    >
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                    <input
                            type="radio"
                            id="customRadioInline1"
                            name="linkageSex"
                            value="男"
                            class="custom-control-input"
                    />
                    <label class="custom-control-label" for="customRadioInline1"
                    >男</label
                    >
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                    <input
                            type="radio"
                            id="customRadioInline2"
                            name="linkageSex"
                            value="女"
                            class="custom-control-input"
                    />
                    <label class="custom-control-label" for="customRadioInline2"
                    >女</label
                    >
                </div>
                <b>电话：</b>
                <label
                ><input
                        style="width: 150px"
                        name="linkagePhone"
                        class="form-control"
                        placeholder="请输入联系人电话"
                /></label>
                &nbsp;&nbsp;
                <button type="button" class="btn btn-primary" onclick="like()">
                    <span class="mdi mdi-table-search"></span>搜索
                </button>
            </form>
            <div id="toolbar">
                <!-- 操作 -->
                <button class="btn btn-primary" href="#" onclick="toAdd()">
                    <span class="mdi mdi-plus"></span>新增联系人
                </button>
                <button class="btn btn-danger" href="#" onclick="batchDelete('customer-linkage')">
                    <span class="mdi mdi-delete"></span>批量删除
                </button>
                <button class="btn btn-primary" href="#" onclick="query()">
                    <span class="mdi mdi-table-large"></span>显示所有
                </button>
            </div>
            <!-- 数据显示 -->
            <div class="table-responsive">
                <table id="table"></table>
            </div>
            <div class="container row">
                <a class="btn btn-primary" href="${ctx}/page/customer"
                ><span class="mdi mdi-keyboard-backspace"></span>返回</a
                >
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div
        class="modal fade bd-example-modal-lg"
        id="myModal"
        tabindex="-1"
        role="dialog"
        aria-labelledby="myModalLabel"
>
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">新增客户联系人信息</h4>
                <div class="col-md-2 column"></div>
                <div class="col-md-4 column" id="close"></div>
                <button
                        type="button"
                        class="close"
                        data-dismiss="modal"
                        aria-label="Close"
                >
                    <a aria-hidden="true">&times;</a>
                </button>
            </div>
            <div class="modal-body" style="background-color: #f8faf7">
                <!-- 增加修改表单 -->
                <div class="table-responsive">
                    <form>
                        <table class="table table-bordered table-hover" id="tab333">
                            <input type="hidden" name="id"/>
                            <input
                                    type="hidden"
                                    name="customerId"
                                    value="${customer.id}"
                            />
                            <tr>
                                <td>联系人名称：</td>
                                <td>
                                    <label
                                    ><input
                                            name="linkageName"
                                            class="form-control"
                                            placeholder="请输入联系人名称"
                                    /></label>
                                </td>
                                <td>联系人性别：</td>
                                <td>
                                    <div
                                            class="custom-control custom-radio custom-control-inline"
                                    >
                                        <input
                                                type="radio"
                                                id="customRadioInline4"
                                                name="linkageSex"
                                                value="男"
                                                class="custom-control-input"
                                                checked="checked"
                                        />
                                        <label
                                                class="custom-control-label"
                                                for="customRadioInline4"
                                        >男</label
                                        >
                                    </div>
                                    <div
                                            class="custom-control custom-radio custom-control-inline"
                                    >
                                        <input
                                                type="radio"
                                                id="customRadioInline5"
                                                name="linkageSex"
                                                value="女"
                                                class="custom-control-input"
                                        />
                                        <label
                                                class="custom-control-label"
                                                for="customRadioInline5"
                                        >女</label
                                        >
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>联系人职位：</td>
                                <td>
                                    <label
                                    ><input
                                            name="linkageJob"
                                            class="form-control"
                                            placeholder="请输入联系人职位"
                                    /></label>
                                </td>
                                <td>联系人电话：</td>
                                <td>
                                    <label
                                    ><input
                                            name="linkagePhone"
                                            class="form-control"
                                            placeholder="请输入联系人电话"
                                    /></label>
                                </td>
                            </tr>
                            <tr>
                                <td>办公室电话：</td>
                                <td>
                                    <label
                                    ><input
                                            name="officePhone"
                                            class="form-control"
                                            placeholder="请输入联系人办公室电话"
                                    /></label>
                                </td>
                                <td>是否有效：</td>
                                <td>
                                    <div
                                            class="custom-control custom-radio custom-control-inline"
                                    >
                                        <input
                                                type="radio"
                                                id="customRadioInline6"
                                                name="isValid"
                                                value="1"
                                                class="custom-control-input"
                                                checked="checked"
                                        />
                                        <label
                                                class="custom-control-label"
                                                for="customRadioInline6"
                                        >有效</label
                                        >
                                    </div>
                                    <div
                                            class="custom-control custom-radio custom-control-inline"
                                    >
                                        <input
                                                type="radio"
                                                id="customRadioInline7"
                                                name="isValid"
                                                value="0"
                                                class="custom-control-input"
                                        />
                                        <label
                                                class="custom-control-label"
                                                for="customRadioInline7"
                                        >无效</label
                                        >
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    关闭
                </button>
                <button
                        type="button"
                        id="btn111"
                        class="btn btn-primary"
                        onclick="insert_update()"
                >
                    保存
                </button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    // 加载事件
    $(function () {
        // 初始化表格
        $('#table').bootstrapTable({
            classes: 'table table-bordered table-hover table-striped text-nowrap',    // 表格样式
            url: '${ctx}/customer-linkage/list?customerId=${customer.id}',     // 请求后台的URL
            method: 'GET',      // 请求方式
            toolbar: "#toolbar",
            pagination: true,   //是否显示分页条
            pageNumber: 1,      // 首页页码，默认为1
            pageSize: 5,        //一页显示的行数
            paginationLoop: false,   //是否开启分页条无限循环，最后一页时点击下一页是否转到第一页
            pageList: [5, 10, 20],   //选择每页显示多少行，数据过少时可能会没有效果
            clickToSelect: true, // 是否启用点击选中行
            undefinedText: '-', // 当字段为 undefined 显示
            sortOrder: "asc", // 排序方式
            showColumns: true, // 是否显示所有的列
            showRefresh: true, // 是否显示刷新按钮
            showToggle: true, // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)
            showExport: true,        // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
            exportDataType: "all", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据
            // 响应处理
            responseHandler: function (res) {
                if (res.code !== 200) {
                    notify("mdi mdi-close", res.message, "danger");
                    return [];
                }

                return res.data;
            },
            // 查询参数
            queryParams: function () {                // 查询条件
                return $("[name='form1']").serializeArray();    // 得到条件查询表单中所有的值
            },
            columns: [{             // 列
                field: 'example',
                checkbox: true      // 是否显示复选框
            }, {
                field: 'no',   // 属性名
                align: 'center',    // 对齐方式
                title: '序号',   // 标题
                formatter: function (value, row, index) {
                    return index + 1;
                }
            }, {
                field: 'id',
                title: '编号',
                visible: false
            }, {
                field: 'linkageName',
                align: 'center',
                title: '姓名'
            }, {
                field: 'linkageSex',
                align: 'center',
                title: '性别',
                formatter: function (value, row, index) {
                    if (row.linkageSex === "男") {
                        return "<span class='text-info'>男</span>";
                    } else if (row.linkageSex === "女") {
                        return "<span class='text-danger'>女</span>";
                    } else {
                        return "-";
                    }
                }
            }, {
                field: 'linkageJob',
                align: 'center',
                title: '职位'
            }, {
                field: 'linkagePhone',
                align: 'center',
                title: '电话',
                formatter: function (value, row, index) {
                    <%--if('${sessionScope.session_user.userName}' !== 'admin'){--%>
                    <%--    return row.linkagePhone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');--%>
                    <%--}else {--%>
                    return row.linkagePhone;
                    <%--}--%>
                }
            }, {
                field: 'officePhone',
                align: 'center',
                title: '办公室电话'
            }, {
                field: 'isValid',
                align: 'center',
                title: '是否有效',
                formatter: function (value, row, index) {     // 格式化
                    if (row.isValid === 1) {
                        return "<span class='badge badge-success'>有效</sapn>";
                    } else if (row.isValid === 0) {
                        return "<span class='badge badge-danger'>无效</span>";
                    } else {
                        return "<span class='badge badge-info'>-</span>";
                    }
                }
            }, {
                field: 'createDate',
                align: 'center',
                title: '创建时间'
            }, {
                field: 'operate',
                align: 'center',
                title: '操作',
                formatter: btnGroup,
                events: {               // 事件
                    'click .edit-btn': function (event, value, row, index) {
                        edit(row);
                    },
                    'click .del-btn': function (event, value, row, index) {
                        remove('customer-linkage', row.id);
                    }
                }
            }],
            onLoadSuccess: function () {      // 数据加载成功时调用的方法
                // 滚动到最底部
                let h = $(document).height() - $(window).height();
                $('body').animate({scrollTop: h}, 1000);
            },
            onLoadError: function () {        // 数据加载失败时调用的方法
                setTimeout(function () {
                    notify("mdi mdi-close", "数据加载失败!", "danger");
                }, 300);
            },
            onCheck: function () {        // 复选框单击事件
                getSelections();
            }
        });
    });

    // 操作按钮 - 新增
    function toAdd() {
        $("form")[1].reset();
        $("#myModal").modal("show");
        $("#myModalLabel").html("新增客户联系人信息");
        $("#btn111").html("保存");
    }

    // 操作方法 - 编辑
    function edit(r) {
        $("#myModal").modal("show");
        $("#myModalLabel").html("修改客户联系人信息");
        $("[name='id']").val(r.id);
        $("[name='linkageName']:eq(1)").val(r.linkageName);
        (r.linkageSex === '男') ? $("[name='linkageSex']:eq(3)").prop("checked", true) : $("[name='linkageSex']:eq(4)").prop("checked", true);
        $("[name='linkageJob']").val(r.linkageJob);
        $("[name='linkagePhone']:eq(1)").val(r.linkagePhone);
        $("[name='officePhone']").val(r.officePhone);
        (r.isValid === 1) ? $("[name='isValid']:eq(0)").prop("checked", true) : $("[name='isValid']:eq(1)").prop("checked", true);
        $("#btn111").html("修改");
    }


    // 操作方法 - 保存,修改
    function insert_update() {
        let isValid = false;

        let $linkageName = $("[name='linkageName']:eq(1)");
        let $linkageJob = $("[name='linkageJob']");
        let $linkagePhone = $("[name='linkagePhone']:eq(1)");
        let $officePhone = $("[name='officePhone']");
        let phoneReg = /^1(3|4|5|6|7|8|9)\d{9}$/;
        let officePhoneReg = /\d{3}-\d{8}|\d{4}-\d{7}/;

        if ($linkageName.val() === '') {
            notify("mdi mdi-close", "联系人名称为必填项！", "danger");
            $linkageName.focus();
        } else if ($linkageJob.val() === '') {
            notify("mdi mdi-close", "联系人职位为必填项！", "danger");
            $linkageJob.focus();
        } else if ($linkagePhone.val() === '') {
            notify("mdi mdi-close", "联系人电话为必填项！", "danger");
            $linkagePhone.focus();
        } else if (!phoneReg.test($linkagePhone.val())) {
            notify("mdi mdi-close", "电话号码格式错误！请重新输入...", "danger");
            $linkagePhone.focus();
        } else if ($officePhone.val() === '') {
            notify("mdi mdi-close", "办公室电话为必填项！", "danger");
            $officePhone.focus();
        } else if (!officePhoneReg.test($officePhone.val())) {
            notify("mdi mdi-close", "办公室电话格式错误！请重新输入...", "danger");
            $officePhone.focus();
        } else {
            isValid = true;
        }

        if (isValid) {
            let url = ($("#btn111").html() === "保存") ? "${ctx}/customer-linkage/save" : "${ctx}/customer-linkage/update"
            let obj = $("form:eq(1)").serializeArray();
            saveOrUpdate(url, obj)
        }
    }
</script>
</body>
</html>
